<template>
	<view class="body">
		<view class="login">
			<view class="topimg">
				<image class="loginimg" src="../../static/img/wangwen.png"></image>
			</view>
			<view class="title">
				<view class="number">
					<text class="zhanghao">账号：</text>
					<input class="numberinput" v-model="user.name" placeholder="请输入账号" />
				</view>
				<view class="password">
					<text class="mima">密码：</text>
					<input class="passwordinput" v-model="user.password" type="password" placeholder="请输入密码" />
				</view>
				<view class="psdicon">
					<label class="size">
						<checkbox :checked='rememberPsw' @tap="rememberPsw =! rememberPsw"/>
						记住账号密码
					</label>
				</view>
				<view @click="login" class="anniu">
					<button class="denglu">登录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    export default {
        data() {
            return {
				id:'',
				uid:'',
				admin_id:'',
				user:{
					name: '',
					password:'',
				},
				rememberPsw:true,
            }
        },
		mounted() {
			//页面加载完成，获取本地存储的用户名及密码
			const name = uni.getStorageSync('name');
			const password = uni.getStorageSync('password');
			if(name && password){
				this.user.name = name;
				this.user.password = password;
			}else{
				this.user.name = "";
				this.user.password = "";
			}
			
		},
		methods: {
			login () {
				uni.request({
					url: 'http://xj.gccrw.cn/api/index/login',
					data: {
						name:this.user.name,
						password:this.user.password,
					},
					method: "POST",
					success:(res) => {
						if(this.user.name == uni.getStorageSync('name') & this.user.password == uni.getStorageSync('password')){
							uni.reLaunch({
								url:'/pages/user/user?name=' + res.data.data.user.name + '&pw=' + res.data.data.user.pw
								    + '&id=' + res.data.data.user.id + '&uid=' + res.data.data.user.uid + '&admin_id='
									+ res.data.data.user.admin_id,
							})
						}else {
							uni.showModal({
								content: '账号或密码错误'
							})
						}
						//登录成功将用户名密码存储到用户本地
						if(this.rememberPsw){
							//用户勾选“记住密码”
							console.log('2222');
							uni.setStorageSync('name', res.data.data.user.name);
							uni.setStorageSync('password',  res.data.data.user.pw);
						}else{
							//用户没有勾选“记住密码”
						    console.log('3333');
							uni.removeStorageSync('name',res.data.data.user.name);
							uni.removeStorageSync('password',res.data.data.user.pw);
						}
						
						uni.setStorageSync('uid', res.data.data.user.uid);
					},
					fail:() => {
						uni.showToast({
							icon:'none',
							title:'请连接网络'
						})
					}
				})
			}
		}
    }
</script>

<style>
	.body{
		background-color: #FFFFFF;
		height: 1519upx;
	}
	.login {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 200upx;
	}
	.topimg {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.loginimg {
		width: 230upx;
		height: 260upx;
		border-radius: 10upx;
	}
	.title {
		display: flex;
		flex-direction: column;
		padding: 80upx;
	}
	.zhanghao {
		color: #333333;
		font-size: 40upx;
		margin: 20upx;
	}
	.mima {
		color: #333333;
		font-size: 40upx;
		margin: 20upx;
	}
	.numberinput {
		background-color: #EEEEEE;
		border-radius: 20upx;
		padding: 20upx;
		margin: 20upx;
		font-size: 30upx;
	}
	.passwordinput {
		background-color: #EEEEEE;
		border-radius: 20upx;
		padding: 20upx;
		margin: 20upx;
		font-size: 30upx;
	}
	.imgicon {
		width: 20upx;
		height: 20upx;
	}
	.psdicon {
		padding: 20upx;
		color: #999999;
	}
	.denglu{
		margin: 20upx;
		background-color: #3C6DD2;
	}
	.size {
		width: 20upx;
		height: 20upx;
		font-size: 33upx;
	}
</style>
